<template>
  <div class="container">
    <el-dialog :visible="showDialog" title="新增目录" width="500px" @close="btnCancel ">
      <el-form ref="addList" :model="form" :rules="rules" label-width="60px">
          <el-form-item label="所属学科" :label-width="formLabelWidth">
          <el-select style="width:300px"   v-model="form.subjectID" placeholder="请选择">
            <el-option v-for="obj in tableData" :key="obj.id" :label="obj.subjectName" :value="obj.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录名称"  :label-width="formLabelWidth" prop="directoryName">
          <el-input style="width:300px" v-model="form.directoryName" autocomplete="off" placeholder="请输入目录名称"></el-input>
        </el-form-item>

      </el-form>
      <!-- 底部插槽取消确定区域 -->
       <el-row slot="footer" type="flex" justify="end">
        <el-col :span="12">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/directorys'

export default {
  data () {
    return {

      form: {
        directoryName: '',
        subjectID: ''
      },

      formLabelWidth: '120px',
      rules: {
        directoryName: [{ required: true, trigger: 'blur', message: '请输入目录名称' }
        ]
      }
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  },
  methods: {
    async btnOK () {
      try {
        await this.$refs.addList.validate()
        // console.log(directoryName)
        // console.log(subjectID)
        // 调用新增接口
        await add(this.form) // 新增员工

        // this.$parent.list()
        this.$emit('add')
        this.$emit('update:showDialog', false)
      } catch (err) {
        console.log(err)
      }
    },
    btnCancel () {
      // 重置原来的数据
      this.form = {
        directoryName: '',
        subjectID: ''
      }
      this.$refs.addList.resetFields() // 重置校验结果
      this.$emit('update:showDialog', false)
    }
  }

}
</script>

<style scoped lang='less'></style>
